<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img  src="../js/001.jpg" alt="这是图片1" width="200px" height="200px">
    <!-- <img  src="../js/002.jpg" alt="这是图片2" width="200px" height="200px"> -->
</body>
<script>
    //设事件源
    let img1=document.querySelector("img");
    //设置事件类型
    img1.onclick=function(){
        //如果被点击就切换
        if(img1.src.indexOf("001.jpg")!=-1){
            img1.src="../js/002.jpg";
        }
        else if(img1.src.indexOf("002.jpg")!=-1){
            img1.src="../js/001.jpg";
        }
        else{
        alert("图片来源错误！");
        }
    }

</script>
</html>